<template>
  <Title title="更新公告">
    <template #small>
      <span class="title-small ml10 common-text">{{ $setTime(new Date()) }}</span>
    </template>
  </Title>
  <div class="show-all" @click="showModal" v-if="noticeList.length > 0">
    <span>查看更多</span>
    <icon-right />
  </div>

  <a-scrollbar v-if="noticeList.length > 0" style="height: 150px; overflow: auto; margin-top: 5px">
    <ul>
      <li @click="showModal(item.id)" v-for="(item, i) in noticeList" :key="i" class="link-item cursor">
        <div class="clearfix" style="width: 644px">
          <div style="width: 500px" class="text-limit fl">{{ item.title }}</div>
          <div class="fr common-text">{{ $setTime(item.gmtCreate) }}</div>
        </div>
      </li>
    </ul>
  </a-scrollbar>

  <a-empty style="margin-top: 30px" v-else description="暂无公告" />

  <noticeDetail v-if="show" :id="id" v-model="show" />
</template>

<script lang="ts" setup>
  import { defineComponent, ref, onMounted } from 'vue'
  import { findNoticePage } from '@/api/home'
  import Title from './Title.vue'
  import noticeDetail from './noticeDetail.vue'
  let noticeList: any = ref([])
  let show = ref(false)
  let id = ref<string>('')

  const showModal: any = (itemId?: string) => {
    itemId ? (id.value = itemId) : (id.value = '')
    show.value = true
  }

  const getList = async () => {
    let params = {
      pageNum: 1,
      pageSize: 20,
    }
    const res: any = await findNoticePage(params)
    noticeList.value = res.data.records || []
    // 有未读的弹框
    let item = noticeList.value.find((item: any) => !item.noticeRead)
    if (item) showModal(item.id)
  }

  onMounted(() => {
    getList()
  })
</script>

<style lang="less" scoped>
  .card-wrap {
    height: 200px;
  }
  ul {
    margin-top: 10px;
    overflow-y: auto;
  }
  li {
    padding: 8px 10px;
    font-size: 12px;
    &:hover {
      background-color: rgb(var(--primary-1));
    }
  }
</style>
